
<template>
    <section>




        <!--工具条-->
        <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
            <el-form :inline='true' :model='filters' @submit.native.prevent>
                <el-form-item>
                    <el-input v-model='filters.name' placeholder='名称/Key'></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' @click='getDtoPage'>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' @click='handleAdd'>新增</el-button>
                </el-form-item>
                <!--<el-button type='danger' @click='batchRemove' :disabled='this.sels.length===0'>批量删除</el-button>-->
            </el-form>
        </el-col>



        <!--列表-->
        <el-table :data='users' highlight-current-row v-loading='listLoading' @selection-change='selsChange'
                  style='width: 100%;'
                  sortable='custom' @sort-change='sortKey'>

            <el-table-column prop='ProName' label='项目名称' width='' sortable>  </el-table-column>
            <el-table-column prop='ComName' label='公司名称' width='' sortable>  </el-table-column>
            <el-table-column prop='PartyA' label='甲方名称' width=''>  </el-table-column>
            <el-table-column prop='PartyAUserName' label='甲方联系人' width=''>  </el-table-column>
            <el-table-column prop='PartyAPhone' label='甲方联系电话' width=''>  </el-table-column>
            <el-table-column prop='ProUser' label='项目负责人' width=''>  </el-table-column>

            <el-table-column label='操作' width='150'>
                <template scope='scope'>
                    <el-button size='small' @click='handleEdit(scope.$index, scope.row)'> 编辑 </el-button>
                    <el-button type='danger' size='small' @click='handleDel(scope.$index, scope.row)'> 删除 </el-button>
                </template>
            </el-table-column>

        </el-table>



        <!-- 工具条 ,分页 -->
        <el-col :span='24' class='toolbar'>
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageIndex"
                           :page-sizes="[ 20, 50, 100]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           style='float:right;'>
            </el-pagination>
        </el-col>



        <!--编辑界面-->
        <el-dialog title='编辑'
                   width="60%"
                   :visible.sync='editFormVisible' v-model='editFormVisible' :close-on-click-modal='false'>
            <el-form :model='editForm' label-width='100px' :rules='editFormRules' ref='editForm'>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label='项目名称' prop='ProName'>
                            <el-input v-model='editForm.ProName' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">

                        <el-form-item label='项目地址' prop='ProAddress'>
                            <el-input v-model='editForm.ProAddress' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label='甲方名称' prop='PartyA'>
                            <el-input v-model='editForm.PartyA' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='甲方联系人' prop='PartyAUserName'>
                            <el-input v-model='editForm.PartyAUserName' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='联系电话' prop='PartyAPhone'>
                            <el-input v-model='editForm.PartyAPhone' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label='公司' prop='ComID'>
                            <select-tree :options="optionsCom"
                                         v-model="editForm.ComID"
                                         :props="defaultProps" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='项目负责人' prop='ProUser'>
                            <el-input v-model='editForm.ProUser' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-form-item label='描述' prop='ProRemark'>
                    <el-input v-model='editForm.ProRemark' auto-complete='off'
                              type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label='坐标'>
                            <el-col :span="12">
                                <el-input v-model='editForm.Lat' auto-complete='off'></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model='editForm.Lng' auto-complete='off'></el-input>
                            </el-col>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label='排序码' prop='SortCode'>

                            <el-input-number v-model="editForm.SortCode" :min="1" :max="9999" label="排序码"></el-input-number>

                            <!--<el-input v-model='editForm.SortCode' auto-complete='off'></el-input>-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='有效标志' prop='EnabledMark'>


                            <el-radio-group v-model="editForm.EnabledMark">
                                <el-radio class="radio" :label="1">启用</el-radio>
                                <el-radio class="radio" :label="0">禁用</el-radio>
                            </el-radio-group>


                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label='创建用户' prop='CreateUserName'>
                            <el-input v-model='editForm.CreateUserName' auto-complete='off' disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label='创建日期' prop='CreateDate'>
                            <el-input v-model='editForm.CreateDate' auto-complete='off' disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label='修改用户' prop='ModifyUserName'>
                            <el-input v-model='editForm.ModifyUserName' auto-complete='off' disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label='修改日期' prop='ModifyDate'>
                            <el-input v-model='editForm.ModifyDate' auto-complete='off' disabled></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='editFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='editSubmit' :loading='editLoading'>提交</el-button>
            </div>
        </el-dialog>



        <!--新增界面-->
        <el-dialog title='新增'
                   width="60%"
                   :visible.sync='addFormVisible' v-model='addFormVisible' :close-on-click-modal='false'>
            <el-form :model='addForm' label-width='100px' :rules='addFormRules' ref='addForm'>




                <el-row>
                    <el-col :span="8">
                        <el-form-item label='项目名称' prop='ProName'>
                            <el-input v-model='addForm.ProName' auto-complete='off'></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="16">

                        <el-form-item label='项目地址' prop='ProAddress'>
                            <el-input v-model='addForm.ProAddress' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="8">

                        <el-form-item label='甲方名称' prop='PartyA'>
                            <el-input v-model='addForm.PartyA' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">

                        <el-form-item label='甲方联系人' prop='PartyAUserName'>
                            <el-input v-model='addForm.PartyAUserName' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">

                        <el-form-item label='联系电话' prop='PartyAPhone'>
                            <el-input v-model='addForm.PartyAPhone' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label='公司' prop='ComID'>
                            <select-tree :options="optionsCom"
                                         v-model="addForm.ComID"
                                         :props="defaultProps" />
                            <!--<el-input v-model='addForm.ComID' auto-complete='off'></el-input>-->
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label='项目负责人' prop='ProUser'>
                            <el-input v-model='addForm.ProUser' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                 

                </el-row>

                <el-form-item label='描述' prop='ProRemark'>
                    <el-input v-model='addForm.ProRemark' auto-complete='off' type="textarea" :rows="2"></el-input>
                </el-form-item>

                <el-row> 
                    <el-col :span="8">
                        <el-form-item label='坐标'> 
                            <el-col :span="12">
                                <el-input v-model='addForm.Lat' auto-complete='off'></el-input>
                            </el-col> 
                            <el-col :span="12">
                                <el-input v-model='addForm.Lng' auto-complete='off'></el-input>
                            </el-col> 
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label='排序码' prop='SortCode'>

                            <el-input-number v-model="addForm.SortCode" :min="1" :max="9999" label="排序码"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='有效标志' prop='EnabledMark'>
                            <el-radio-group v-model="addForm.EnabledMark">
                                <el-radio class="radio" :label="1">启用</el-radio>
                                <el-radio class="radio" :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='addFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='addSubmit' :loading='addLoading'>提交</el-button>
            </div>
        </el-dialog>





    </section>
</template>

<script>

    import SelectTree from "../../components/selectTree";
    import util from '../../../util/date'
    import { testapi, getPage_WY_Project, GetListToUI_WY_Company, getList_WY_Company, getByID_WY_Project, edit_WY_Project, add_WY_Project, batchRemove_WY_Project, Remove_WY_Project } from '../../api/api';

    export default {

        components: { SelectTree },
        data() {   // 全局变量
            return {


                // 默认选中值
                selected: "",
                // 数据默认字段
                defaultProps: {
                    parent: "ParentCode", // 父级唯一标识
                    value: "value", // 唯一标识
                    label: "label", // 标签显示
                    children: "children" // 子级
                },
                optionsCom: [],



                filters: { name: '' },
                users: [],

                total: 0,
                pageSize: 20,
                pageIndex: 1,
                sidx: null,   //  排序字段
                order: null,  //  排序方式， 正序\倒序




                listLoading: false,
                sels: [],//列表选中列
                addDialogFormVisible: false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {

                    ProName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                    ProAddress: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                    PartyA: [{ required: true, message: '请输入甲方名称', trigger: 'blur' }],
                    PartyAUserName: [{ required: true, message: '请输入甲方联系人', trigger: 'blur' }],
                    PartyAPhone: [{ required: true, message: '请输入甲方联系电话', trigger: 'blur' }],
                    ProUser: [{ required: true, message: '请输入项目负责人', trigger: 'blur' }],
                    Lat: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                    Lng: [{ required: true, message: '请输入经度', trigger: 'blur' }],
                    ComID: [{ required: true, message: '请输入公司编号', trigger: 'blur' }],

                }
                ,
                //编辑界面数据
                editForm: {
                    Id: '',
                    ProName: '',
                    ProAddress: '',
                    PartyA: '',
                    PartyAUserName: '',
                    PartyAPhone: '',
                    ProUser: '',
                    Lat: '',
                    Lng: '',
                    ProRemark: '',
                    SortCode: 0,
                    EnabledMark: 0,
                    ComID: '',
                }
                ,
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    Id: [{ required: true, message: '请输入主键', trigger: 'blur' }],
                    ProName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                    ProAddress: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                    PartyA: [{ required: true, message: '请输入甲方名称', trigger: 'blur' }],
                    PartyAUserName: [{ required: true, message: '请输入甲方联系人', trigger: 'blur' }],
                    PartyAPhone: [{ required: true, message: '请输入甲方联系电话', trigger: 'blur' }],
                    ProUser: [{ required: true, message: '请输入项目负责人', trigger: 'blur' }],
                    Lat: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                    Lng: [{ required: true, message: '请输入经度', trigger: 'blur' }],
                    ComID: [{ required: true, message: '请输入公司编号', trigger: 'blur' }],

                }
                ,
                //新增界面数据
                addForm: {
                    ProName: '',
                    ProAddress: '',
                    PartyA: '',
                    PartyAUserName: '',
                    PartyAPhone: '',
                    ProUser: '',
                    Lat: '',
                    Lng: '',
                    ProRemark: '',
                    SortCode: 0,
                    ComID: '',
                    EnabledMark: 1
                }

            }
        },
        methods: {    // 全局方法

            handleCurrentChange(val) {
                this.page = val;
                this.getDtoPage();
            },
            // 每页数
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDtoPage();
            },

            // 测试
            sortKey(val) {
                console.log(val)
            },


            //获取用户列表
            getDtoPage() {
                let para = {
                    page: this.pageIndex,
                    pageSize: this.pageSize,
                    key: this.filters.name,
                    sidx: this.sidx,
                    order: this.order
                };
                this.listLoading = true;

                getPage_WY_Project(para).then((res) => {
                    console.log(res);
                    this.total = res.data.response.dataCount;
                    this.users = res.data.response.data;
                    this.listLoading = false;

                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.Id };
                    Remove_WY_Project(para).then((res) => {
                        if (util.isEmt.format(res)) {
                            this.listLoading = false;
                            return;
                        }
                        this.listLoading = false;
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                    });
                }).catch((c) => {
                    console.log(c);
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;

                let para_getGetByID = { id: row.Id };

                getByID_WY_Project(para_getGetByID).then((getDto) => {

                    this.editForm = Object.assign({}, getDto.data.response);
                });
            },
            //显示新增界面
            handleAdd() {
                this.addFormVisible = true;
                this.addForm = {
                    ProName: '',
                    ProAddress: '',
                    PartyA: '',
                    PartyAUserName: '',
                    PartyAPhone: '',
                    ProUser: '',
                    Lat: '',
                    Lng: '',
                    ProRemark: '',
                    SortCode: 0,
                    EnabledMark: 1
                }
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            console.log(para);
                            edit_WY_Project(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.editLoading = false;
                                    return;
                                }
                                if (res.data.success) {
                                    this.editLoading = false;

                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getDtoPage();
                                } else {
                                    this.editLoading = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                                this.editLoading = false;
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);

                            add_WY_Project(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.addLoading = false;
                                    return;
                                }

                                if (res.data.success) {
                                    this.addLoading = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getDtoPage();
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                                this.editLoading = false;
                            });
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {

                var ids = this.sels.map(item => item.Id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids };

                    batchRemove_WY_Project(para).then((res) => {
                        this.listLoading = false;

                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                        console.log(res)
                    });
                }).catch(() => {

                });
            }

            ,// 递归方法
            getTreeData(data) {
                // 循环遍历json数据
                for (var i = 0; i < data.length; i++) {

                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        data[i].children = undefined;
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },
            // 获取级联选择器数据
            getComData() {
                GetListToUI_WY_Company().then((res) => {
                    this.optionsCom = this.getTreeData(res.data.response);
                });
            }

            , selectChange(e) {
                var arrNew = [];
                var dataLength = this.mineStatusValue.length;
                var eleng = e.length;
                for (let i = 0; i < dataLength; i++) {
                    for (let j = 0; j < eleng; j++) {
                        if (e[j] === this.mineStatusValue[i].label) {
                            arrNew.push(this.mineStatusValue[i])
                        }
                    }
                }
                this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
            }

        },
        mounted() {
            this.getDtoPage();

            this.getComData();
            // 取值

        }
    }

</script>

<style scoped>
</style>
